css 是你永远也学不会的语言 [2023-03-23]

视频地址

效果

TIP

文字类似下划线，鼠标放入，从左侧进，从右侧出， 鼠标放到下面文字上查看效果

你站在桥上看风景，看风景的人在楼上看你。明月装饰了你的窗子，你装饰了别人的梦。

代码实现

<template>
  <div class="test">
    <span>你站在桥上看风景，看风景的人在楼上看你。明月装饰了你的窗子，你装饰了别人的梦。</span>
  </div>
</template>
<style lang="less" scoped>
.test {
  span {
    font-size: 24px;
    line-height: 2;
    background:
      linear-gradient(to left, #fbc2eb, #a6c1ee) right bottom/0px 2px no-repeat;
    transition: background-size 1s;

    &:hover {
      background-position-x: left;
      background-size: 100% 2px;
    }
  }
}
</style>